<template>
    <yd-layout>
        <yd-grids-group :rows="5">
            <yd-grids-item v-for="user in users.list" :key="user.user_id" @click.native="showDetail(user)">
                <img slot="icon" :src="user.user_image ? user.user_image : 'assets/img/default/staff.png'">
                <span slot="text">{{user.user_name}}</span>
            </yd-grids-item>
        </yd-grids-group>
        <yd-popup v-model="showUser" position="bottom" height="40%">
            <ui-contact :contact="userInfo"></ui-contact>
        </yd-popup>
    </yd-layout>
</template>

<script>
module.exports = {
    data () {
        return {
            showUser: false,
            userInfo: {}
        }
    },
    created () {
        if(!this.room || !this.room.room_name) {
            this.$router.push('/')
        } else {
            this.$store.dispatch('chatRoom', () => {
                this.$store.commit('webar', {
                    show: 'default',
                    nav: {
                        title: this.room.room_name,
                        back: {name: 'chat'}
                    }
                })
            })
        }
    },
    computed: {
        room () {
            return this.$store.getters.chatRoom
        },
        users () {
            return this.$store.getters.chatUsers
        }
    },
    methods: {
        showDetail (user) {
            this.showUser = true
            this.userInfo = user
        }
    }
}
</script>

<style scoped>
.yd-grids-icon {
    height: 1rem;
}
.yd-grids-icon img {
    height: 1rem;
    border-radius: 1rem;
}
.yd-grids-icon:hover img {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 0.1rem 0px;
}
.avatarBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.avatarBox img {
    width: 1rem;
    height: 1rem;
    border-radius: .1rem;
}
.avatarDesc {
    padding-top: .3rem;
}
.userBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.4rem;
}
.itemvalue {
    padding-left: .2rem;
    font-size: .28rem;
    color: #000;
    -webkit-transform:scale(1,1.6);
    -moz-transform:scale(1,1.6);
}
.username {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.userdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}

</style>